<template>
    <div class="statistics_search_container">
        <el-form inline label-width="70" :model="formInfo">
            <el-form-item label="时间筛选">
                <el-date-picker
                    v-model="formInfo.times"
                    class="select-item-date"
                    type="daterange"
                    :disabled-date="disabledDate"
                    :editable="false"
                    :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
                    range-separator="~"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    @change="changeDate"
                    @calendar-change="calendarChange" />
            </el-form-item>
            <el-form-item label="推广类型">
                <el-select
                    v-model="formInfo.promotion_type"
                    multiple
                    collapse-tags
                    class="select-item"
                    placeholder="请选择推广类型"
                    clearable>
                    <el-option
                        v-for="item in PROMOTION_ACTIVITY_SELECT_TYPE"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled" />
                </el-select>
            </el-form-item>
            <el-form-item label="推广方式">
                <el-select
                    v-model="formInfo.promotion_way"
                    multiple
                    collapse-tags
                    class="select-item"
                    placeholder="请选择推广方式"
                    clearable>
                    <el-option
                        v-for="item in PROMOTION_METHOD_TYPE"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="员工账号">
                <el-select
                    v-model="formInfo.account_ids"
                    multiple
                    collapse-tags
                    class="select-item"
                    placeholder="请选择子账号"
                    clearable
                    @visible-change="visibleChange">
                    <el-option
                        v-for="item in accountOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="推广商品">
                <el-select-v2
                    v-model="formInfo.product_ids"
                    multiple
                    filterable
                    remote
                    :remote-method="onRemoteMethod"
                    clearable
                    :options="productOptions"
                    class="select-item"
                    placeholder="请输入店铺商品名称选择">
                </el-select-v2>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { getCreateList } from '@/api/common';
import { getGoodsList } from '@/api/concreation';
import { PROMOTION_ACTIVITY_SELECT_TYPE, PROMOTION_METHOD_TYPE } from '@/const/ecommerce';
import { ElSelectV2 } from 'element-plus';
import { getDay } from '@/utils/utils';

const routers = useRoute();

const { shop_id } = routers.query;

const formInfo = reactive<any>({
    shop_id: shop_id,
    times: [getDay(-7), getDay(-1, true)],
    promotion_type: [],
    promotion_way: [],
    account_ids: [],
    product_ids: []
});

const accountOptions = ref<any>([]);

const productOptions = ref<any>([]);

const pickDay = ref();
const impose = ref(89);

/**
 * 选择时间做多支持选择90天的数据
 */
const disabledDate = (time: any) => {
    if (!pickDay.value) {
        return time.getTime() > Date.now() - 3600 * 1000 * 24;
    }
    const con1 = new Date(pickDay.value).getTime() - 89 * 24 * 60 * 60 * 1000;
    const con2 = new Date(pickDay.value).getTime() + 89 * 24 * 60 * 60 * 1000;
    const con3 = time.getTime() > Date.now() - 3600 * 1000 * 24;
    return con3 ? con3 : time.getTime() < con1 || time.getTime() > con2;
};

const calendarChange = (val: Date[]) => {
    const [pointDay] = val;
    pickDay.value = pointDay;
};

const changeDate = (val: any) => {
    if (!val || !val.length) {
        pickDay.value = '';
        return;
    }
};

const emit = defineEmits(['submit']);

const visibleChange = async (val: boolean) => {
    if (val) {
        const res = await getCreateList({ noNeedLoading: true });
        const arr = res.map((item: any) => {
            item.value = item.id;
            item.label = `${item.name}  (${item.phone}) `;
            return item;
        });
        accountOptions.value = arr;
    }
};

const onRemoteMethod = async (query: any) => {
    if (!query) return;
    const params = {
        goods_info: query,
        shop_id: shop_id,
        page: 1,
        page_size: Number.MAX_SAFE_INTEGER,
        state: 'all'
    };
    const res = await getGoodsList(params);
    const list = res.data.map((v: any) => {
        return {
            label: v.product_name,
            value: v.id,
            status: v.state
        };
    });
    productOptions.value = list;
};

const onSubmit = () => {
    // 如果是做了清空的操作，则不查询接口
    if (!formInfo.times) {
        return;
    }
    emit('submit', formInfo);
};

watch(
    () => formInfo,
    val => {
        onSubmit();
    },
    { deep: true }
);
onMounted(() => {
    onSubmit();
});
</script>

<style lang="scss" scoped>
:deep(.select-item-date) {
    width: 270px;
}

.select-item {
    width: 290px;
}

// .statistics_search_container {
//     .layout {
//         margin-top: 0 !important;
//     }

//     display: flex;

//     :deep(.searchForm) {
//         border: none !important;
//         padding: 24px 0 0 4px !important;
//     }

//     .form_container {
//         display: flex;
//         align-items: center;
//         padding: 24px 0 0 24px;
//     }
// }
</style>
